<template>

  <div>
    <el-row class="el-row-list el-card-user el-row-main">
      <el-col :span="3" style="margin-left: 50px;">
        <div class="info-item">
          <span class="info-lable">姓名：</span>
          <span class="info-content">{{approvalUser.name}}</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="info-item">
          <span class="info-lable">性别：</span>
          <span class="info-content">{{approvalUser.sex}}</span>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="info-item">
          <span class="info-lable">年龄：</span>
          <span class="info-content" v-if="approvalUser.age">{{approvalUser.age}}岁</span>
          <span class="info-content" v-else>暂无</span>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="info-item">
          <span class="info-lable">民族：</span>
          <span class="info-content info-contentnationalityDisplay">{{approvalUser.nationalityDisplay}}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="info-item">
          <span class="info-lable">身份证号：</span>
          <span class="info-content">{{approvalUser.idCard}}</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    props: ["approvalUser", "showMembers"],
    data() {
      return {};
    },
    mounted() { },
    methods: {
      handleShowMembers(idCard) {
        this.$router.push({
          name: "livingAllowancesDetail",
          params: { idCard: idCard }
        });
      }
    }
  };
</script>
<style>
  .person-info {
    padding: 20px;
    display: flex;
    height: 170px;
  }

  .el-row-main {
    margin-bottom: 35px !important;
  }

  .person-info img {
    width: 100px;
    height: 130px;
  }

  .info-row-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .person-info-lf .info-lable {
    font-size: 14px;
    padding-right: 5px;
    display: inline-block;
    color: #b7b7b7;
  }

  .person-info-lf .info-content {
    font-size: 16px;
    padding-right: 5px;
    color: #676a6c;
  }

  .info .info-row .info-item .info-lable {
    font-size: 14px;
    padding-right: 5px;
    display: inline-block;
    color: #b7b7b7;
  }

  .person-info-lf {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    float: left;
    margin-left: 25px;
    color: #666;
    width: 400px;
    overflow: hidden;
  }

  .info .info-row {
    display: flex;
    justify-content: space-between;
  }

  .info-row .name {
    font-size: 24px;
    font-weight: 600;
    padding-right: 15px;
    color: #f8ac59;
    display: inline-block;
    height: 25px;
    line-height: 25px;
  }

  .info .info-row .info-item {
    flex-grow: 1;
  }

  .info .info-row .info-item .info-content {
    font-size: 16px;
    padding-right: 5px;
    display: inline-block;
  }
</style>